<template>
  <div class="content">
    <div class="page-body-top">
      <div class="body-left bg_style">
        <div class="body-header">
          <div class="bh-left">
            <h6 class="car_title">常用应用</h6>
            <span class="icon iconfont icon-shouye-shezhi icon_style text_01" @click="setingAppItem"></span>
          </div>
          <div class="bb-ton">
            <div class="bb-ton-con btn_style" @click="handlePrev()"> <span class="icon iconfont">&#xe65f;</span></div>
            <div class="bb-ton-con btn_style" @click="handleNext()"> <span class="icon iconfont">&#xe65e;</span></div>
          </div>
        </div>
        <div class="body-list-outer" :style="{'margin-left': num * 190 + 'px','transition': 'all .3s ease-out .1s',}">
          <ul class="body-list" v-if="alwaysAppBeans.length>0">
            <li v-for="(item,index) in alwaysAppBeans" :key="index" @click="goAppUsage(item)">
              <img class="border_style" :src="item.app_logo?imgurl(item.app_logo):``" :onerror="onErrorImg()">
              <div class="bl-text text-overflow text_01" :title="item.app_name">{{item.app_name}}</div>
            </li>
          </ul>
          <div class="addinner" v-else>
            <img class="add-img" :src="require('../../assets/images/boxbg.png')">
            <YsButton class="add-btn" @click="addApp()" size="small" type="primary">添加应用</YsButton>
          </div>
        </div>

      </div>
      <div class="body-right bg_style">
        <div class="bh-st-header">
          <div class="bh-st">
            <h6 class="car_title">我的待办</h6>
          </div>
          <ul class="quota">
            <li>
              <p class="text_style">待上架审批</p>
              <div class="quota-right">
                <div class="qr-l car_title">{{myAgent.stay_up&&myAgent.stay_up.today_num?myAgent.stay_up.today_num:0}}</div>
                <div class="qr-r">
                  <span v-if="myAgent.stay_up&&myAgent.stay_up.diff_num<0" class="icon iconfont" style="color:rgba(213, 57, 57, 1)">&#xe656;</span>
                  <span v-else class="icon iconfont" style="color:rgba(19, 179, 143, 1)">&#xe651;</span>
                  <div class="quota-wz ">较昨日 <span :style="{'color':myAgent.stay_up&&myAgent.stay_up.diff_num<0?'rgba(213, 57, 57, 1)':'rgba(19, 179, 143, 1)'}"> <i v-if="myAgent.stay_up&&myAgent.stay_up.diff_num>0">+</i>
                      {{myAgent.stay_up&&myAgent.stay_up.diff_num?myAgent.stay_up.diff_num:0}}</span></div>
                </div>
              </div>
            </li>
            <li>
              <p class="car_title">待订阅审批</p>
              <div class="quota-right">
                <div class="qr-l car_title">{{myAgent.stay_sub&&myAgent.stay_sub.today_num?myAgent.stay_sub.today_num:0}}</div>
                <div class="qr-r">
                  <span v-if="myAgent.stay_sub&&myAgent.stay_sub.diff_num<0" class="icon iconfont" style="color:rgba(213, 57, 57, 1)">&#xe656;</span>
                  <span v-else class="icon iconfont" style="color:rgba(19, 179, 143, 1)">&#xe651;</span>
                  <div class="quota-wz">较昨日 <span :style="{'color':myAgent.stay_sub&&myAgent.stay_sub.diff_num<0?'rgba(213, 57, 57, 1)' : 'rgba(19, 179, 143, 1)'}">
                      <i v-if="myAgent.stay_sub&&myAgent.stay_sub.diff_num>0">+</i>
                      {{myAgent.stay_sub&&myAgent.stay_sub.diff_num?myAgent.stay_sub.diff_num:0}}</span></div>
                </div>
              </div>
            </li>
            <li>
              <p class="car_title">待检测任务</p>
              <div class="quota-right">
                <div class="qr-l car_title">{{myAgent.stay_check_job&&myAgent.stay_check_job.today_num?myAgent.stay_check_job.today_num:0}}</div>
                <div class="qr-r">
                  <span v-if="textFlag" class="icon iconfont" style="color:rgba(213, 57, 57, 1)">&#xe656;</span>
                  <span v-else class="icon iconfont" style="color:rgba(19, 179, 143, 1)">&#xe651;</span>
                  <div class="quota-wz">较昨日 <span :style="{'color':textFlag?'rgba(213, 57, 57, 1)':'rgba(19, 179, 143, 1)'}">
                      <i v-if="myAgent.stay_check_job&&myAgent.stay_check_job.diff_num>0">+</i>
                      {{myAgent.stay_check_job&&myAgent.stay_check_job.diff_num?myAgent.stay_check_job.diff_num:0}}</span></div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="page-body-content bg_style">
      <div class="map-conten">
        <div class="state-content">
          <div class="state-eve-box" v-for="(item, index) in stateLisst" :key="index">
            <div class="state-bg-box">
              <div class="state-color" :style="{background: item.state_bg}"></div>
            </div>
            <div class="state-name text_01">{{item.name}}</div>
          </div>
        </div>
        <div class="map-id car_style" id="mapEchart"></div>
        <div class="map-bar-box">
          <BarEchart :id="'top1'" :data="barList[0]"></BarEchart>
        </div>
        <div class="map-bar-box">
          <BarEchart :id="'top2'" :data="barList[1]"></BarEchart>
        </div>
      </div>
      <div class="map-right-conten">
        <div class="card-public car_style right-c-top">
          <TopCom></TopCom>
        </div>
        <div class="card-public car_style right-c-center">
          <CenCom></CenCom>
        </div>
        <div class="card-public car_style right-c-bottom">
          <BotCom></BotCom>
        </div>
      </div>
    </div>

    <!-- 应用弹窗 -->
    <pro-dialog class="add-serve" ref="commonlyAppDom" width="944" :nopadding="true" title="常用应用设置">
      <div class="model-box" style="padding:0 24px 24px">
        <div class="search">
          <YsInput style="width:220px" clearable @on-clear="getAlwaysAppSetingList" @keydown.enter.native="getAlwaysAppSetingList" v-model="model_param.app_name" placeholder="请输入应用名称">
            <YsIcon type="icon iconfont icon-sousuo" style="color: #405680;" slot="prefix" />
          </YsInput>
        </div>
        <div class="app-outer border_style">
          <YsRow class="app-inner" :gutter="16">
            <YsCol span="6" v-for="(item,index) in page.beans" :key="index">
              <div class="app-box border_style carBg" :class="{'active':item.single}">
                <YsCheckbox class="app-checkbox" v-model="item.single"></YsCheckbox>
                <h3 class="car_title">{{item.app_name}}</h3>
                <p :title="item.app_intro" v-if="item.app_intro" class="text-overflow text_01">{{item.app_intro}}</p>
                <p v-else>--</p>
              </div>
            </YsCol>
          </YsRow>
          <div class="page">
            <div class="records text_01">
              共{{ page.total }}条
            </div>
            <YsPage @on-change="pageChange" :page-size="model_param.limit_recd" :current="model_param.start_recd" :total="page.total" class="pagePallion"></YsPage>
          </div>
        </div>
        <YsRow class="foot-btn" style="margin-top:16px">
          <YsButton class="btn-style" @click="handleClose">取消</YsButton>
          <YsButton class="btn-style" @click="handleSubmit" type="primary">提交</YsButton>
        </YsRow>
      </div>
    </pro-dialog>
  </div>
</template>

<script>
import TeadTitle from "../../components/Main/headTitle.vue";
import RouteLink from "../../components/Main/routeLink.vue";
import TopCom from "./components/top.vue";
import CenCom from "./components/center.vue";
import BotCom from "./components/botttom.vue";
import BarEchart from "./components/echart.vue";
import { ys_utils } from 'ys-utils-js';
import { mapActions, mapGetters } from "vuex";
export default {
  name: "Home",
  components: {
    TeadTitle,
    TopCom,
    CenCom,
    BotCom,
    BarEchart,
    RouteLink
  },
  created() {
    this.userlist = ys_utils.getSessionStorage('CommData') && JSON.parse(ys_utils.getSessionStorage('CommData')) || {};
  },
  data() {
    return {
      num: 0,
      swchih: false,
      textFlag: true,
      alwaysAppBeans: [],

      barList: [
        { name: '地区', xdata: ['华北', '华中', '华东', '华南', '华西'], ydata: [18, 30, 23, 35, 27] },
        { name: '行业', xdata: ['汽轮船', '锅炉', '电站', '油气管道', '密封容器'], ydata: [43, 56, 123, 15, 97] },
      ],
      stateLisst: [
        { state_bg: '#33BCCE', name: '已入住' },
        { state_bg: '#E8B200', name: '待入住' },
        { state_bg: '#656665', name: '未入住' },
      ],
      page: {
        beans: [],
        all_recd: 0,
        pageSize: 10,
        current: 1,
        total: 0,
      },
      //模型参数
      model_param: {
        start_recd: 1,//开始数据
        limit_recd: 12,//查询的条数
        app_name: ''
      },
      //常用列表
      use_param: {
        start_recd: 1,//开始数据
        limit_recd: 10,//查询的条数
      },
      //我的待办
      myAgent: {
        stay_up: {}, // 待上架
        stay_sub: {}, // 待订阅
        stay_check_job: {}, // 待检测任务
      }
    };
  },
  methods: {
    ...mapActions(['addalwaysAppItem', 'deleteAlwaysAppItem', 'getAlwaysAppList', 'getAlwaysAppSetting', 'getmyBacklogList']),
    tabClick(item, index) {
      for (let i in this.tabList) {
        this.tabList[i].selected = false;
      }
      this.$router.push(item.page_url)
    },
    mapDraw() {
      let mapechart = this.$echarts.init(document.getElementById('mapEchart'))
      let geoCoordMap = {
        "北京市": [116.4007503787, 39.9031844643],
        "大连市": [121.5228793091, 38.99],
        "武汉市": [114.3365145193, 30.5477075054],
        "成都市": [104.0645225402, 30.573883935],

      };

      let data = [
        { name: "北京市", value: 200, },
        { name: "大连市", value: 110 },
        { name: "武汉市", value: 140 },
        { name: "成都市", value: 170 },

      ];
      let convertData = function (data) {
        let res = [];
        for (let i = 0; i < data.length; i++) {
          let geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
              itemStyle: {
                normal: {
                  // color:'blue'
                }
              },
            });
          }
        }
        for (let j in res) {
          if (res[j].name == '北京市') res[j].list = [1, 8, 2]
          if (res[j].name == '大连市') res[j].list = [0, 6, 1]
          if (res[j].name == '武汉市') res[j].list = [1, 5, 3]
          if (res[j].name == '成都市') res[j].list = [0, 8, 2]
        }
        return res;
      };

      let convertedData = [
        convertData(data),
        convertData(data.sort(function (a, b) {
          return b.value - a.value;
        }).slice(0, 6))
      ];
      data.sort(function (a, b) {
        return a.value - b.value;
      })
      let option = {
        // backgroundColor: '#F9F9F9',
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicInOut',
        animationDurationUpdate: 1000,
        animationEasingUpdate: 'cubicInOut',

        geo: {
          map: 'china',
          left: '20',
          right: '10%',
          center: [85.98, 36.205],
          zoom: .75,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: 'rgba(243, 245, 246, 1)',
              borderColor: 'rgba(181, 208, 248, 1)'
            },
            emphasis: {
              areaColor: 'rgba(243, 245, 246, 1)'
            }
          }
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: '#FFF',
          padding: 15,
          formatter: (params) => {
            return `
            <div style='width:100px; font-size:16px; color:#405680'>${params.data.name}</div>
            <div style='padding-left:5px; font-size:12px; color: #33BCCE'>已入住 ${params.data.list[0]}</div>
            <div style='padding-left:5px; font-size:12px; color: #656665'>未入住 ${params.data.list[1]}</div>
            <div style='padding-left:5px; font-size:12px; color: #E8B200'>待入住 ${params.data.list[2]}</div>
            `
          }
        },
        grid: {
          right: 140,
          top: 100,
          bottom: 40,
          width: '30%'
        },
        yAxis: {
          show: false,
        },
        series: [{

          //  name: 'Top 5',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: convertedData[0],
          symbolSize: function (val) {
            return Math.max(val[2] / 10, 8);
          },
          showEffectOn: 'emphasis',
          rippleEffect: {
            brushType: 'stroke'
          },
          // hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              // show: true
            }
          },
          itemStyle: {
            normal: {
              color: 'RGBA(232, 178, 0, .8)',
              shadowBlur: 50,
              shadowColor: 'RGBA(242, 230, 185, 1)'
            }
          },
          zlevel: 1
        }]
      };
      mapechart.setOption(option)
    },
    //图片报错
    onErrorImg(name) {
      return ("this.οnerrοr=null;this.src=" + '"' + require(`../../assets/images/default-05.png`) + '";');
    },
    //左滑动
    handlePrev() {
      if (this.num < 0) {
        this.num += 1;
      }
    },
    //右滑动
    handleNext() {
      if (this.num > -(this.alwaysAppBeans.length - 1 + this.num)) {
        this.num -= 1;
      } else if (this.num < -(this.alwaysAppBeans.length + this.num) && -(this.alwaysAppBeans.length + this.num) != -0) {

      }
    },
    //添加应用
    addApp() {
      this.getAlwaysAppSetingList()
      this.$refs.commonlyAppDom.show()
    },
    //关闭弹框
    handleClose() {
      this.$refs.commonlyAppDom.close()
    },
    //打开弹出
    setingAppItem() {
      this.addApp()
    },
    //分页
    pageChange(num) {
      this.model_param.start_recd = num
      this.getAlwaysAppSetingList()
    },
    //查询应用
    getAlwaysAppSetingList() {
      this.getAlwaysAppSetting(this.model_param).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.page.total = data.all_recd
          this.page.beans = data.beans.map((item, index) => {
            if (item.is_setting) {
              return Object.assign({}, { ...item, single: true })
            } else {
              return Object.assign({}, { ...item, single: false })
            }
          })
        }
      })
    },
    //应用列表
    getAlwaysAppListAll() {
      let _this = this
      this.getAlwaysAppList(this.use_param).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.alwaysAppBeans = data.alwaysAppBeans
        }
      })
    },

    handleSubmit() {
      let addChangApp = this.page.beans.map(v => { if (v.is_setting == 0 && v.single) { return { app_id: v.id } } }).filter(item => typeof item !== 'undefined')
      if (addChangApp.length > 0) {
        this.addAppAlwaysListItem(addChangApp)
      }
      let deleteApp = this.page.beans.map(v => { if (v.is_setting == 1 && v.single == false) { return { id: v.id } } }).filter(item => typeof item !== 'undefined')
      if (deleteApp.length > 0) {
        this.deleteAlwaysAppListItem(deleteApp)
      }
    },
    //新增常用列表
    addAppAlwaysListItem(data) {
      this.addalwaysAppItem({ alwaysAppInfos: data }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.$YsMessage.success(data.message_text);
          this.$refs.commonlyAppDom.close()
          this.getAlwaysAppListAll()
        }
      })
    },
    //删除常用列表
    deleteAlwaysAppListItem(data) {
      this.deleteAlwaysAppItem({ alwaysAppInfos: data }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.$YsMessage.success(data.message_text);
          this.$refs.commonlyAppDom.close()
          this.getAlwaysAppListAll()
        }
      })
    },
    //获取路径
    imgurl(path) {
      return `${window.GlobalConfig.serviceProxy.BaseUrl}` + path
    },
    //获取我的待办
    getmyBacklogAll() {
      this.getmyBacklogList({}).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.myAgent.stay_up = data.stay_up || null
          this.myAgent.stay_sub = data.stay_sub || null
          this.myAgent.stay_check_job = data.stay_check_job || null
        }
      })
    },
    //快捷键跳转
    goAppUsage(item) {
      this.$router.push({ name: "appUsageList", query: { id: item.app_id, app_name: item.app_name, state: item.app_state } });
      // if (item.app_state == 1) {
      // } else {
      //   this.$YsMessage.info("未上架")
      // }
    }
  },
  mounted() {
    this.mapDraw()
    this.getAlwaysAppListAll()
    this.getmyBacklogAll()
  },
};
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  // padding: 0 22px;
  .tab-content {
    width: 100%;
    height: 48px;
    line-height: 48px;
    .tab-box-eve {
      width: 166px;
      height: 100%;
      text-align: center;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #405680;
      background: #ffffff;
      border: 1px solid #cfd7e5;
      float: left;
      cursor: pointer;
      &:hover {
        background: #0061ff;
        color: #ffffff;
      }
    }
    .selected-bg {
      background: #0061ff;
      color: #ffffff;
    }
  }
  .page-body-content {
    width: 100%;
    height: calc(100% - 206px);

    padding: 16px 16px 12px 16px;
    .map-conten,
    .map-right-conten {
      display: inline-block;
    }
    .map-conten {
      width: 70%;
      height: 100%;
      border-radius: 4px;
      overflow: hidden;
      position: relative;

      .state-content {
        width: 500px;
        height: 62px;
        position: absolute;
        z-index: 99;
        .state-eve-box {
          width: 120px;
          height: 100%;
          float: left;
          .state-bg-box {
            width: 30px;
            height: 100%;
            display: flex;
            float: left;
            .state-color {
              width: 10px;
              height: 10px;
              border-radius: 100%;
              margin: auto;
            }
          }
          .state-name {
            float: left;
            font-size: 16px;
            font-family: PingFangSC-Medium;
            font-weight: 400;
            line-height: 62px;
            color: #405680;
          }
        }
      }
      .map-id {
        width: 100%;
        height: 100%;
        position: absolute;
      }
      .map-bar-box {
        width: 413px;
        height: 250px;
        background: rgba(192, 192, 192, 0.1);
        position: absolute;
        z-index: 99;
        top: 60px;
        &:last-of-type {
          top: 330px;
        }
      }
    }
    .map-right-conten {
      // width: 29%;
      width: calc(30% - 8px);
      height: 100%;
      margin-left: 8px;
      float: right;
      overflow: auto;
      .right-c-top {
        height: 208px;
      }
      .right-c-center {
        height: 290px;
      }
      .right-c-bottom {
        height: 279px;
      }

      .card-public {
        width: 100%;
        border-radius: 4px;
        float: left;
        margin-bottom: 8px;
      }
      &:first-child {
        .card-public {
          margin-bottom: 10px;
        }
      }
    }
  }
  .page-body-top {
    height: 186px;
    margin-bottom: 8px;
    display: flex;
    .body-header {
      display: flex;
      margin-bottom: 6px;
      .bh-left {
        display: flex;
        .icon-shouye-shezhi {
          margin-left: 6px;
          margin-top: 2px;
        }
      }
      .bb-ton {
        display: flex;
        margin-left: auto;
        .bb-ton-con {
          width: 24px;
          height: 24px;
          line-height: 24px;
          // background: rgba(245, 247, 250, 1);
          opacity: 1;
          border-radius: 4px;
          text-align: center;
          cursor: pointer;
          &:hover {
            background: rgba(0, 97, 255, 1);
            color: #fff;
          }
          .icon {
            font-size: 10px;
          }
          margin-left: 4px;
        }
      }
      /deep/.ivu-icon {
        font-size: 20px;
        margin-left: 8px;
        margin-top: 4px;
      }
      h6 {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
      }
    }
    .body-list-outer {
      overflow: auto;

      &::-webkit-scrollbar {
        width: 5px;
        height: 0px;
      }
      .addinner {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        .add-img {
          width: 210px;
          display: block;
        }
        .add-btn {
          margin-top: 8px;
        }
      }
      .body-list {
        display: flex;

        li {
          flex-shrink: 0;
          margin-right: 19px;
          position: relative;
          .cardCheckbox {
            position: absolute;
            right: 0px;
            top: 5px;
            margin-right: 0;
          }
          img {
            width: 100%;
            height: 84px;
            display: block;
            border-radius: 4px 4px 0px 0px;
            border-bottom: 1px solid #ccc;
          }
          width: 171px;
          height: 127px;
          border: 1px solid #cfd7e5;
          border-radius: 4px;
          .bl-text {
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
            font-weight: 500;
            color: #405580;
          }
        }
      }
    }

    .body-left {
      width: 70%;
      width: calc(70% - 8px);
      padding: 8px 16px;
    }
    .body-right {
      width: 30%;
      margin-left: 1%;
      margin-left: 8px;
      padding: 16px;
      .quota {
        display: flex;
        margin-top: 16px;
        li {
          flex: 1;
          // padding-left: 20px;
          p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            height: 22px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 22px;
            // color: #405580;
            opacity: 0.6;
          }
          .quota-right {
            display: flex;
            margin-top: 22px;
            .qr-l {
              width: 32%;
              height: 56px;
              font-size: 40px;
              font-family: PingFang SC;
              font-weight: 400;
              line-height: 56px;
              // color: #405580;
              opacity: 1;
            }
            .qr-r {
              width: 50%;
              text-align: right;

              .quota-wz {
                margin-top: 6px;
                font-size: 14px;
                font-family: PingFangSC-Regular;
                line-height: 20px;
                color: #667799;
                min-width: 60px;
                overflow: hidden;
                // text-overflow: ellipsis;
                white-space: nowrap;
                opacity: 1;
                i {
                  font-style: normal;
                }
              }
            }
          }
          &:nth-child(3) {
            padding-left: 20px;
          }
          &:nth-child(2) {
            // background: red;
            padding-left: 26px;
            position: relative;
            &:before {
              content: "";
              display: inline-block;
              position: absolute;
              left: 0;
              top: 34px;
              width: 1px;
              height: 40px;
              background: rgba(207, 215, 229, 1);
            }
            &::after {
              content: "";
              display: inline-block;
              position: absolute;
              top: 32px;
              right: 0;
              width: 1px;
              height: 40px;
              background: rgba(207, 215, 229, 1);
            }
          }
        }
      }
    }
    .bh-st {
      h6 {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
      }
    }
  }
}

.app-outer {
  margin-top: 16px;
  border: 1px solid #cfd7e5;
  min-height: 310px;
  padding: 16px 16px 12px;
  border-radius: 4px;
  .app-inner {
    min-height: 240px;
    .app-box {
      width: 100%;
      height: 108px;
      background: rgba(245, 247, 250, 0.39);
      border: 1px solid #cfd7e5;
      opacity: 1;
      text-align: center;
      border-radius: 4px;
      margin-bottom: 16px;
      position: relative;
      .app-checkbox {
        position: absolute;
        left: 10px;
        top: 8px;
      }
      h3 {
        margin: 30px 0 8px 0;
        font-size: 18px;
        font-weight: 500;
        // color: #405680;
      }
      p {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #405680;
        width: 80%;
        height: 24px;
        overflow: hidden;
        margin: 0 auto;
      }
      &:hover {
        background: rgba(225, 234, 247, 0.39);
        border: 1px solid #0061ff;
      }
    }

    .active {
      background: rgba(225, 234, 247, 0.39);
      border: 1px solid #0061ff !important;
    }
  }
}
.page {
  display: flex;
  align-items: center;
  .records {
    font-size: 16px;
    color: #405680;
  }
  .pagePallion {
    margin-left: auto;
  }
}
.icon_style {
  color: #405680;
  cursor: pointer;
}
.btn-style {
  width: 96px;
  height: 48px;
}
</style>